<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button v-on:click="count++">+</button>
    <button @click="flag = !flag">切换显示和隐藏</button>
      <p v-show="flag">我出来啦！</p>

      <div class="box">
          <h3>Black的自动贩卖机</h3>
          <button @click="buy(5)">可乐5元</button>
          <button @click="buy(10)">咖啡10元</button>
          <p>银行卡余额: {{ money }}元</p>

      </div>
<!-- v-on:
          1.作用: 注册事件 = 添加事件监听 + 提供处理逻辑
          2.语法:
            v-on:事件名="内联语句"
            v-on:事件名="methods中的函数名"
            (等号左半:添加监听  等号右半:提供处理逻辑)
          3.等价（语法糖）:
            v-on: = @
          4.实例
            （1）v-on:click="count++"
            （2）v-on:click="fn"   (没有fn后面的参数表！)
            （3）@click="fn"
-->

<!-- v-on(带参数):
          1.语法:
           @click="fn(实参1 , 实参2)"
             fn(形参1 , 形参2){
                 函数体
               }
-->
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100,
          flag: false,
          money: 100,
      },
        methods: {
          buy (prize) {
              this.money -= prize;
          }
        }
    })
  </script>
</body>
</html>